<template>
  <!-- style="position:relative;top:200px;" -->
  <div>
    <!-- <el-skeleton :rows="6" animated /> -->
    <div class="Breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right" hover="click">

        <el-breadcrumb-item :to="{ path: '/' }"> 首页 </el-breadcrumb-item>
        <el-breadcrumb-item> 商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container_box">

      <div class="selectBox" :class="navBarFixed == true ? 'selectBoxFixed' :''">
        <div class="header_titleBox">
          <h1 class="header_title" :class="navBarFixed == true ? 'header_title_Fixed' :''">
            MASK-Clothes(2199)</h1>
        </div>

        <!--  -->
        <div class="eldrop">
          <span class="downLeftFilter" @click="openDownFilter">
            {{ FilterStatus ? '显示筛选条件' : '隐藏筛选条件'}}
            <i class="el-icon-s-operation"></i></span>
          <el-dropdown @command="handleCommand" trigger="click" size="medium">
            <span class="el-dropdown-link">
              排序条件<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown_rc">
              <el-dropdown-item command="a">推荐</el-dropdown-item>
              <el-dropdown-item command="a">最新</el-dropdown-item>
              <el-dropdown-item command="b">价格由高到低</el-dropdown-item>
              <el-dropdown-item command="c">价格由低到高</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <div class="container-list">
        <div class="cardBox">
          <!-- left_tab -->
          <!-- 动态class left_tab -->
          <div class="ft_fixed" :class="{ 'tableft_fix': navBarFixed_select, 'downFilter': isDownFilter }">
            <!-- <div class="" :class="navBarFixed_select == true ? 'tableft_fix' :''"> -->
            <div class="cardBox_left_tab">
              <div class="left_filter_bar">
                <div class="left_content_wrapper">
                  <div class="left_content">
                    <div class="left_nav_wrapper">

                      <nav aria-label="筛选条件" class="left_nav">
                        <div class="left_nav_categories">
                          <div class="categores_content">
                            <!-- 总体分类 -->
                            <a class="categores_item css_ym" v-for="(item,i) in listtTypeCheck" :key="i">
                              <!-- 连帽衫和套头衫 -->
                              <span @click="goodschoseType(item.TypeId)"> {{item.typeName}}
                              </span>

                            </a>
                            <!-- <a href="" class="categores_item css_ym" aria-label="类型">上衣体恤</a>
                          <a href="" class="categores_item css_ym" aria-label="类型">短裙和连衣裙</a>
                          <a href="" class="categores_item css_ym" aria-label="类型">慢跑长裤与运动裤</a>
                          <a href="" class="categores_item css_ym" aria-label="类型">中强度支撑</a>
                          <a href="" class="categores_item css_ym" aria-label="类型">配件和装备</a> -->
                          </div>
                        </div>
                        <!-- 筛选条件 -->
                        <div class="left_nav_filter">
                          <div class="left_nav_filter_wrapper">
                            <el-collapse v-model="left_filter_accord" @change="accordion_handleChange">

                              <el-collapse-item name="1">
                                <template slot="title">
                                  <p class="nav_filter_collapse_p">产品类型</p>
                                </template>

                                <div class="nav_filtercollapse_cont">
                                  <div class="nav_filtercollapse_cont_dp">
                                    <div class="nav_filtercollapse_groups">

                                      <button v-for="(item,i) in listCheck" :key="i" class="btn_filtercollapse"
                                        type="button" @click="FcchangeCheck(item.value,i)">
                                        <div :class="{'fc_checked': item.check == 1,'fc_checkbox_1': item.check == 0}">
                                          <div class="icon_checked"></div>
                                        </div>
                                        <span class="fc_content">{{item.ckName}}</span>
                                      </button>

                                    </div>
                                  </div>
                                </div>

                              </el-collapse-item>

                              <el-collapse-item name="2">
                                <template slot="title">
                                  <p class="nav_filter_collapse_p">经典款色</p>
                                </template>
                               
                              </el-collapse-item>
                              <el-collapse-item name="3">
                                <template slot="title">
                                  <p class="nav_filter_collapse_p">特色产品</p>
                                </template>
                                
                              </el-collapse-item>
                              <!-- <i class="header-icon el-icon-info"></i> -->

                            </el-collapse>
                          </div>
                        </div>
                      </nav>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <!-- 商品列表 -->
          <!-- :class="navBarFixed_select == true ? 'el-cardBox_fixed' :''" -->

          <el-row class="" style="padding-right:30px" :class="{ 'el-cardBox_fixed': navBarFixed_select_cardBox,
                     'change_el_cardBox': changeCardBox ,
                     'el-cardBox': top_change_cardBox,
                     '': cardBox_orgins}" 
                     v-loading="loading">
            <!-- index > 0 ? 1 : 0 -->
            <!-- <div class="" :class="navBarFixed_select == true ? 'clmmm' :''"></div> -->
            <div>
              <el-col :span="7" v-for="(list,index) in listData" :key="index" :offset="1">
                <a @click="toDetail(list.gid)" style="cursor:pointer;">
                  <el-card :body-style="{ padding: '0px',margin:'0'}" shadow="click" class="el-cardBox_card">
                    <img :src="'/static/gd/'+list.imgLink" class="image" >
                    <div style="padding: 2px;">
                      <div class="cardTag">
                      </div>
                      <div class="oNcard_info">
                        <div class="oNcard_info_one">{{list.gname}}</div>
                        <div class="oNcard_info_two">{{list.detailName}}</div>
                      </div>
                      <div class="oNcard_bottom">
                        <div class="oNcard_info_price">￥{{list.gprice}}</div>
                      </div>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </div>
          </el-row>

        </div>
        <!-- 其他 -->
        <div class="other_list" style=""></div>
      </div>
    </div>
  </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    name: 'list',
    inject: [
      "MyMessage","reload"
    ],
    data() {
      return {
        //吸顶
        navBarFixed: false, // 吸顶 list_title
        navBarFixed_select: false, //list_left_tab
        navBarFixed_select_cardBox: false,
        top_change_cardBox: false, //top cardBox
        cardBox_orgins: false,
        //Filter
        changeCardBox: false,
        isDownFilter: false,
        FilterStatus: false,
        fccheck: false,
        //leftcheck
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true,
        // 总体分类
        listtTypeCheck: [{
            TypeId: 0,
            typeName: "上衣体恤",
            check: 0
          },
          {
            TypeId: 1,
            typeName: "短裙和连衣裙",
            check: 0
          },
          {
            TypeId: 2,
            typeName: "慢跑长裤与运动裤",
            check: 0
          },
          {
            TypeId: 3,
            typeName: "中强度支撑",
            check: 0
          },
          {
            TypeId: 4,
            typeName: "配件和装备",
            check: 0
          },
        ],
        // 多条件查询
        //产品类型
        listCheck: [{
            value: 1,
            ckName: "鞋类",
            check: 0
          },
          {
            value: 2,
            ckName: "服装",
            check: 0
          },
          {
            value: 3,
            ckName: "训练装备",
            check: 0
          },
          {
            value: 4,
            ckName: "户外",
            check: 0
          },
          
        ],
       
        //选中列表
        checkedList: [],
        checkRadio: 0, //多选框状态 1选中 0取消
        //Loading
        loading: false,
        msg: '',
        currentDate: new Date(),
        left_filter_accord: ['1', '2'],
        listData: [{
            gid:0,
            typeId: 0,
            gname: "",
            detailName: "",
            gprice: "",
            gcode: "",
            gdescribe: "",
            gnum: "",
            gstatus: "",
            imgLink:""
          }, 

        ]
      }
    },
    methods: {

      //获取商品列表
      getGoodsList(){
         this.$axios.post('/goods/getGoodsList', {}).then(res => {
                console.log(res.data.data);
                if(res.data.code == 0){
                  this.listData = res.data.data;
                }else{
                  this.listData.gname = '获取数据NULL'
                  console.log("获取数据为空");
                }
             })
      },
      //选择分类
      goodschoseType(val) {
        this.reload();
        // this.MyMessage("选择了" + val);
      },
      //自定义多选框 点击即可查询
      FcchangeCheck(val, index) {
        // console.log(val);
        if (this.listCheck[index].check == 1) { //当前选中
          this.listCheck[index].check = 0;

          for (let i = 0; i < this.checkedList.length; i++) {
            // console.log(this.checkedList[i]);
            if (this.checkedList[i] == val) {
              this.checkedList.splice(i, 1); //(开始位置,数目)
              // this.checkedList
            }
          }

        } else if (this.listCheck[index].check == 0) { //未选中
        
          this.listCheck[index].check = 1;
          this.checkedList.push(val);
        } else {
          console.log("none");
        }
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 400);
        //多条件查询列表
       
      
  
        this.$axios.post('/goods/queryByType', {'typeCondition':this.checkedList}).then(res => {
                console.log(res.data.data);
                if(res.data.code == 0){
                  this.listData = res.data.data;
                  // this.reload();
                }else{
                  // this.reload();
                  this.listData.gname = '获取数据NULL'
                  console.log("获取数据为空");
                }
        })
        setTimeout(() => {
        if(this.checkedList.length==0){
          this.$axios.post('/goods/getGoodsList', {}).then(res => {
                console.log(res.data.data);
                if(res.data.code == 0){
                  this.listData = res.data.data;
                }else{
                  this.listData.gname = '获取数据NULL'
                  console.log("获取数据为空");
                }
             })
        }
        }, 500);

      
       



      },
      getCheckFilter(val) {
        console.log("1111111")
        console.log(val);
      },
      //手动多选框 ↑

      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
    
      handleCommand(command) {
        this.$message('click on item ' + command);
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 400);
      },
      // g根据id 选中商品 查看具体页面
      toDetail(val) {

        // this.$router.push('/detail');
        localStorage.setItem("goodsId",val)
        this.$router.push({
          name:'detail',
          params:{goodsId:val}
        })
      },
      // 筛选标题
      accordion_handleChange(val) {
        console.log(val);
        if (val == "") {
          console.log("val==''");
        }
      },


      //吸顶
      watchScrolls() {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        // console.log(scrollTop)
        // console.log(scrollTop)
        //  当滚动超过 90 时，实现吸顶效果
        if (scrollTop > 100) {
          this.navBarFixed = true;
        } else {
          this.navBarFixed = false;
        };
        // navBarFixed_select
        if (scrollTop > 100) {
          this.navBarFixed_select = true;
          if (this.FilterStatus == true) { //true为隐藏
            this.navBarFixed_select_cardBox = false;
            this.top_change_cardBox = true;
          } else {
            this.top_change_cardBox = false;
            this.navBarFixed_select_cardBox = true;
          }

        } else {
          this.top_change_cardBox = true;
          this.navBarFixed_select = false;
          this.navBarFixed_select_cardBox = false;
          this.top_change_cardBox = false;
        };
      },
      //关闭or打开 筛选框
      openDownFilter() {
        //FilterStatus
        if (this.FilterStatus == false) { //to显示
          this.FilterStatus = true;
          this.isDownFilter = true;
          this.changeCardBox = true;
          this.navBarFixed_select_cardBox = false;
          this.top_change_cardBox = true;
          this.cardBox_orgins = false
          return 1;
        }
        //this.navBarFixed = false; 
        // navBarFixed_select_cardBox
        if (this.FilterStatus == true) { //to隐藏
          this.FilterStatus = false;
          this.isDownFilter = false;
          this.changeCardBox = false;
          if (this.navBarFixed_select == false && this.navBarFixed == false) {
            this.navBarFixed_select_cardBox = false;
          } else {
            this.navBarFixed_select_cardBox = true;

          }
          this.top_change_cardBox = false;
          this.cardBox_orgins = false
          return 1;
        }
      },
    },
    mounted() {
      window.addEventListener("scroll", this.watchScrolls);
      this.getGoodsList();
    }
  }
</script>

<style scoped src="./list.css">
 
</style>
